{% if theme_preview == '1' or  storeConfig.comments_status == '1' %}

{% stylesheet %}
.block_comment_image .block_comment_list li{
    list-style-type: none;
    background-color:#F6F6F6;
}
.block_comment_image .block_comment_list li .block_comment_list_star{
    position: absolute;
    left: 50%;
    top: -12px;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.16); 
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
.block_comment_image .block_comment_list li .block_comment_list_content{
    margin-bottom: 10px;
    overflow: hidden;
    color: var(--detail_color); 
}
.block_comment_image .block_comment_list li .block_comment_list_author{
    margin-bottom: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    color:var(--title_color);
    overflow: hidden;
}
.block_comment_image .block_comment_list li .block_comment_list_author img{
    max-width: 20px;
    max-height: 20px;
    margin-right: 10px;
}
.block_comment_image .block_comment_list li .block_comment_list_author span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.block_comment_image .block_comment_list li .block_comment_list_img img{
    max-width: 100%;
    width: 100%;
    display: block;
}
.block_comment_image .block_comment_list_star svg + svg{
    margin-left: 4px;
}
.block_comment_image .block_comment_li .block_comment_product{
    padding: 20px;
    border-top: 1px solid #dddddd;
}
.block_comment_image .block_comment_list li .block_comment_product a{
    display: flex;
    align-items: center;
}
.block_comment_image .block_comment_list li .block_comment_product a .pic{
    width: 50px;
    height: 50px;
    display: block;
    overflow:hidden;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}
.block_comment_image .block_comment_list li .block_comment_product a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.block_comment_image .block_comment_list li .block_comment_product a .name{
    display: block;
    width: calc(100% - 50px);
    padding-left: 10px;
    box-sizing: border-box;
    overflow: hidden;

    word-wrap: break-word;
    word-break: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--detail_color);
}
.block_comment_image .block_comment_list li .block_comment_list_time{
    color: var(--detail_color);
}
.block_comment_image .block_comment_li .block_comment-content{
    padding: 30px 20px 20px;
    position: relative;
}
@media (max-width: 767px){
    .block_comment_image .block_comment_li .block_comment-content{
        padding: 20px 10px 10px;
        position: relative;
    }
    .block_comment_image .block_comment_li .block_comment_product{
        padding: 10px;
    }
    .block_comment_image .block_comment_list li .block_comment_product a .pic{
        width: 40px;
        height: 40px;
    }
    .block_comment_image .block_comment_list_star svg{
        width: 14px;
        height: 14px;
    }
    .block_comment_image .block_comment_list_star svg + svg{
        margin-left: 2px;
    }
    .mo-waterfall-warp .mo-waterfall-column {
        grid-row-gap:15px;
    }
}
{% endstylesheet %}
<div class="block_comment_image" id="block_comment_image_{{block_id}}">
    <div class="{% if section.settings.is_width_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        <div class="block_comment_list" >
            <ul id="block_comment_list_{{block_id}}">
                
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        const waterfall = new waterfalls({
            id: "#block_comment_list_{{block_id}}",
            bottomDistance: 50,
            scrollBottom: scrollBottom,
            resizeConfig: [{
                    min:0,
                    max: 767,
                    rowGutter: '15px',
                    columnsGutter: '15px',
                    columns: 2
                },
                {
                    min: 768,
                    max: 1199,
                    rowGutter: '30px',
                    columnsGutter: '30px',
                    columns: 3
                },
                {
                    min: 1200,
                    rowGutter: '30px',
                    columnsGutter: '30px',
                    columns: {{ section.settings.web_column }}
                }
            ],
            renderComplete(node){
                window.addLazyImages && addLazyImages(node.find("img[data-src]"));
            },
            render(item) {

                var imageBox = '';
                var star = '';
                var flagImg = '';
                var date = '';
                const empty = " {{ 'empty.png' | public_asset_abs_url }}";

                
                if(item.is_image == "1" && item.images.src.length){
                    //<img data-src="'+item.images.src[0]+'" src="{{ 'empty.png' | public_asset_abs_url }}">
                    imageBox = '<div class="block_comment_list_img"><a href="'+item.url+'" ><img data-src="'+item.images.src[0]+'" src="{{ 'empty.png' | public_asset_abs_url }}"></a></div>';
                }else{
                    imageBox = '';
                }

                if(item.flag){
                    flagImg = `<img src="${item.flag}" alt="${item.alt || item.title}" />`;
                }

                if(item.created_at){
                    date = `<div class="block_comment_list_time block_comment_size">${ moi.formatZoneDate(item.created_at,"YYYY-mm-dd")}</div>`;
                }

                for(var j=0; j < 5;j++){
                    if(j < item.star){
                        star += '{% include icon_block_star ,{width:"16",height:"16",color: "#F8AD6B"} %}';
                    }else{
                        star += '{% include icon_block_star ,{width:"16",height:"16",color: "#bbbbbb"} %}';
                    }   
                }
                var data_from = '{{data_from}}';
                //<img data-src="${item.src}" src="{{ 'empty.png' | public_asset_abs_url }}">
                return `
                    <li class="block_comment_li">
                        ${imageBox}
                        <div class="block_comment-content">
                        <div class="block_comment_list_star">${star}</div>
                        <div class="block_comment_list_author">${flagImg}<span>${item.customer_name}</span></div>
                        <div class="block_comment_list_content block_comment_size">${item.content}</div>
                        ${date}
                        </div>
                        <div class="block_comment_product"><a href="/products/${item.handle}?data_from=${data_from}"><span class="pic" style="background-image: url(${item.src})"></span><span class="name block_comment_size">${item.title}</span></a></div>
                    </li>
                `;
            }
        })


        let page = 1;
        let isAll = true;
        let maxRequestNumber = '{{ section.settings.loadding }}';
        let isScrollLoad = false;
        let loaddingColumn = {{ section.settings.loadding_column }};
        let webColumn = {{ section.settings.web_column }};
        let loaddingNum = parseInt(loaddingColumn) * parseInt(webColumn);
        
        function getCollection() {
            waterfall.showLoad()
            if (maxRequestNumber) {
                maxRequestNumber--
            }
            moi.ajax({
                url:"/comments",
                type:"get",
                data:{
                    page: page,
                    pagesize: loaddingNum,
                    is_image: 1,
                    created_at:"{{ section.settings.time }}",
                    star:{{ section.settings.level }}
                },
                success: function(ret) {
                    if (!ret.code) {
                        isScrollLoad = false;
                        waterfall.hideLoad()
                        if(!ret.data.comment.length){
                             waterfall.RenderDefaultData({
                                is_image:1,
                                images: {src: ["{{ 'empty.png' | public_asset_abs_url }}"]},
                                star: 5,
                                url: 'javascript:;',
                                flag: "{{ 'empty.png' | public_asset_abs_url }}",
                                customer_name:"Customer Name",
                                updated_at: "2021-12-03T14:25:06+08:00",
                                content: "content",
                                p_handle:"",
                                title:"title",
                                src:"{{ 'empty.png' | public_asset_abs_url }}"
                            }, '{{ section.settings.button_text }}')
                            return
                        }


                        waterfall.addStorage(ret.data.comment)
                        isAll = ret.data.paginate.pageTotal === page ? true : false;
                        //最大加载次数
                        if (!maxRequestNumber || isAll) {
                            waterfall.showMore("{{ section.settings.button_text }}", '/comments')
                        }

                    }
                }
            })
        }


        function scrollBottom() {
            if (!isScrollLoad && !isAll  && maxRequestNumber) {
              isScrollLoad = true;
              page++;
              getCollection();
            }
        }

        getCollection();
    })
   
</script> 
{% endif %}

{% schema %}
{
    "name": {
        "zh_CN": "晒图评论"
    },
    "tag": "default",
    "class": "block_comment_image",
    "is_global": false,
    "settings": [
        {
            "type": "card_header",
            "label": {
                "zh_CN": "设置"
            }
        },
         {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满"
      },
      "id": "is_width_fill"
    },
        {
            "type": "card_input",
            "id": "title",
            "label": {
                "zh_CN": "标题"
            },
            "placeholder": {
                "zh-CN": "请输入标题"
            }
        },
        {
            "type": "card_text_editor",
            "id": "detail",
            "label": {
                "zh_CN": "简短描述"
            },
            "placeholder": {
                "zh-CN": "请输入描述"
            }
        },
        {
            "type": "card_slider",
            "id": "web_column",
            "max": "6",
            "min": "3",
            "label": {
                "zh_CN": "pc每排数量"
            }
            
        },
        {
            "type": "card_slider",
            "id": "loadding",
            "max": "10",
            "min": "0",
            "label": {
                "zh_CN": "加载次数"
            }
            
        },
        {
            "type": "card_slider",
            "id": "loadding_column",
            "max": "3",
            "min": "1",
            "label": {
                "zh_CN": "每次加载排数"
            }
            
        },
        {
      "type": "card_select",
      "id": "time",
      "label": {
        "zh_CN": "评论时间"
      },
      "option": [
        {
          "label": {
            "zh_CN": "最新评论"
          },
          "value": "desc"
        },
        {
          "label": {
            "zh_CN": "最早评论"
          },
          "value": "asc"
        }
      ],
      "default": "asc"
    },
    {
      "type": "card_select",
      "id": "level",
      "label": {
        "zh_CN": "评论星级"
      },
      "option": [
        {
          "label": {
            "zh_CN": "五星"
          },
          "value": "5"
        },
        {
          "label": {
            "zh_CN": "四星及以上"
          },
          "value": "4"
        },
        {
          "label": {
            "zh_CN": "三星及以上"
          },
          "value": "3"
        },
        {
          "label": {
            "zh_CN": "二星及以上"
          },
          "value": "2"
        },
        {
          "label": {
            "zh_CN": "一星及以上"
          },
          "value": "1"
        }
      ],
      "default": "4"
    },
        {
            "type": "card_input",
            "label": {
                "zh_CN": "查看更多文案"
            },
            "id": "button_text"
        }

    ],
    "blocks": [],
    "default": {
        "settings": {
            "title": "Style Gallery",
            "detail": "",
            "web_column": "3",
            "loadding": "2",
            "loadding_column": "2",
            "time": "desc",
            "level": "4",
            "is_width_fill":false,
            "button_text": "View More"
        },
        "blocks": []
    }
}
{% endschema %}